<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/29
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .yangshi{
            font-size: 20px;
            color: aqua;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
<center>
<select class="yangshi" name="sheng" id="sheng" onchange="shi(this)">
    <option value="">请选择</option>
</select>省

<select class="yangshi" name="shi" id="shi" onchange="xian(this)">
    <option value="">请选择</option>
</select>市

<select class="yangshi" name="xian" id="xian">
    <option value="">请选择</option>
</select>县
</center>
</body>

<script src="js/jquery-1.12.4.min.js"></script>

<script>

    sheng();

    function sheng() {
        $.ajax(
            {
                url:"${pageContext.request.contextPath}/sheng",
                method: "get",
                dataType: "json",
                success: function (shengs) {
                    for(var i = 0;i<shengs.length;i++){
                        $("#sheng").append('<option value="'+shengs[i].provinceid+'">'+shengs[i].province+'</option>')
                    }


                }
            }
        )
    }

    function shi(obj) {

        $.ajax({
            url:"${pageContext.request.contextPath}/shi",
            method: "get",
            data: "id="+$(obj).val(),
            dataType: "json",
            success: function (shis) {
                $("#shi option:gt(0)").remove();
                $("#xian option:gt(0)").remove();
                for(var i = 0;i<shis.length;i++){
                    $("#shi").append('<option value="'+shis[i].cityid+'">'+shis[i].city+'</option>')
                }
            }
        })
    }

    function xian(obj) {
        $.ajax({
            url:"${pageContext.request.contextPath}/xian",
            method: "get",
            data: "id="+$(obj).val(),
            dataType: "json",
            success: function (xians) {
                $("#xian option:gt(0)").remove();
                for(var i = 0;i<xians.length;i++){
                    $("#xian").append('<option value="'+xians[i].areaid+'">'+xians[i].area+'</option>')
                }
            }
        })
    }
</script>
</html>
